<template>
	<view>
		<view class="shop_t">
			<view @click="change(1)" :class="params.sendType == 1?'ats':'ts'">
				我的点赞
			</view>
			<view @click="change(2)" :class="params.sendType == 2?'ats':'ts'">
				我的评论
			</view>
		</view>
		<view class="">
			<view class="items" v-for="(item,index) in ulist" :key="index">
				<view class="items_t">
					<image :src="item.sendUserHead" mode=""></image>
					<view class="" style="margin-left: 20rpx;">
						<view class="uname">{{item.sendUserName}}</view>
						<view class="utime">{{item.createTime}}</view>
					</view>
				</view>
				<view class="test">
					<span v-if="params.sendType==1">赞了这条评论</span>
					<span v-else>
						<view class="" v-if="item.receiveUserSendLevel == 1">
							{{item.sendContent}}
						</view>
						<view class="" v-else>
							<span class="s1">回复</span>{{item.receiveUserName}}：{{item.sendContent}}
						</view>
					</span>
				</view>
				<view class="items_b">
					<view class="texts" v-if="params.sendType==2 &&item.receiveUserSendLevel == 2">
						{{item.receiveUserName}}：
						<span>{{item.receiveUserSendContent}}</span>
					</view>
					<view class="items_b_flex">
						<image :src="item.productImg" mode="aspectFill"></image>
						<view class="" style="margin-left: 12rpx;">
							<view class="t1">{{item.shopName}}</view>
							<view class="t2">{{item.productName}}({{item.productCount}}份)
								￥{{item.productPrice}} <span>￥{{item.productPriceOld}}</span></view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="kong" v-if="nolist">
			<view class="">
				<image src="/static/xkong.png" mode=""></image>
				<view class="ts">
					尚无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		customerMsgreply
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				params: {
					sendType: 1,
					pageNum: 1,
					pageSize: 10
				},
				ulist: [],
				nolist: false,
				ischange:false,
			};
		},
		onLoad() {
			this.getlist()
		},
		onReachBottom() {
			this.ischang = false
			this.params.pageNum++
			this.getlist()
		},
		methods: {
			getlist() {
				customerMsgreply(this.params).then(res => {
					if (res.code == 200) {
						if(this.ischang){
							this.ulist = res.rows
						}else{
							this.ulist.push(...res.rows)
						}
						let total = Math.ceil(res.total / this.params.pageSize);
						this.nolist = total == 0
						if(this.params.pageNum>1&&this.ulist.length == res.total){
							uni.showToast({
								title:'已加载全部',
								icon:'none'
							})
						}
					}
				})
			},
			change(type) {
				this.params.sendType = type
				this.params.pageNum = 1
				this.ischang = true
				this.getlist()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.kong {
		width: 100%;
		margin: 230rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		image {
			width: 228rpx;
			height: 228rpx;
		}

		.ts {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;
			margin-top: 20rpx;
		}
	}

	.shop_t {
		display: flex;
		background: #fff;
		padding-top: 10rpx;
		position: sticky;
		top: 0%;
		z-index: 9;

		.ts {
			width: 50%;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			padding-bottom: 20rpx;
			border-bottom: 2px solid #E6E6E6;
		}

		.ats {
			width: 50%;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			padding-bottom: 20rpx;
			border-bottom: 2px solid #000000;
		}
	}

	.items {
		padding: 40rpx 20rpx;
		background: #fff;
		box-sizing: border-box;
		margin-bottom: 20rpx;

		.items_t {
			display: flex;
			align-items: center;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}

			.uname {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.utime {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #979797;
				margin-top: 8rpx;
			}
		}

		.test {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			margin: 6rpx auto 12rpx;
			.s1{
				font-weight: 500;
				font-size: 28rpx;
				color:#CE7034;
			}
		}


		.items_b {
			width: 710rpx;
			background: #FBFBFB;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 20rpx;
			box-sizing: border-box;
			.texts {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				margin-bottom: 20rpx;
				span{
					word-break: break-all;
				}
			}
			.items_b_flex{
				display: flex;
			}

			image {
				width: 80rpx;
				height: 80rpx;
			}

			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.t2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
				margin-top: 10rpx;

				span {
					color: #D1CDCD;
					text-decoration: line-through;
				}
			}
		}
	}
</style>